<template>
  <div>
    <div id="pieChart1" style="height: 420px" />
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    chartData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      formData: {},
      rules: {},
    };
  },
  computed: {},
  watch: {
    chartData: {
      initData(newval, oldval) {
        if (newval) {
          this.showchart(); //渲染echarts的函数
        }
        return newval;
      },
    },
  },

  mounted() {
    this.showchart();
  },
  methods: {
    showchart() {
      var barlist = [
        { name: "系统通证", value: this.chartData.mainGTFYBalance },
        {
          name: "余额",
          value: Number(
            (
              this.chartData.gtfyBalance - this.chartData.mainGTFYBalance
            ).toFixed(2)
          ),
        },
        //  按照格式 name为x轴名称，value为对应的数据
      ];
      var chartDom = document.getElementById("pieChart1");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "总GTFY余额",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        grid: {
          x: 120,
          y: 245,
          x2: 0,
          y2: 0,
          borderWidth: 0.1,
        },
        series: [
          {
            // name: "悬浮文本",
            type: "pie",
            radius: "50%",
            data: barlist,
            label: {
              normal: {
                show: true,
                formatter: "{b}:{c}" + "\n\r" + "({d}%)",
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
<style></style>
